"use client"
import Icon from '@/components/common/icon'
import Link from '@/components/common/link'
import { getArticleDetailUrl } from '@/utils/build-url/news'
import { formatWithThousandsSeparator } from '@/utils/format/number'
import classNames from 'classnames'
import { AiFillEye } from "react-icons/ai";

export interface INewsArticleRecommendItemProps {
  id: number
  title: string
  slug: string
  viewCount: number
  authorName: string
}
interface Props {
  obj: INewsArticleRecommendItemProps
  index: number
}
const ArticleRecommendItem = ({obj: {id, title, slug, viewCount, authorName}, index}: Props) => { 
  return (
    <Link href={getArticleDetailUrl({ language: 'zh', article: slug })} className='flex gap-content-gap-x md:gap-content-gap-x-md'>
      <div className={classNames('shrink-0 rounded-full w-[30px] h-[30px] md:w-[40px] md:h-[40px] flex items-center justify-center', {
        'bg-primary/90': index === 0,
        'bg-primary/60': index === 1,
        'bg-primary/30': index === 2,
        'bg-bg-gray': index > 2,
      })}>{index + 1}</div>
      <div key={id} className='space-y-content-gap-y md:space-y-content-gap-y-md'>
        <h3>{title}</h3>
        <div className='tip flex items-center gap-txt-gap-x'>
          <span className='flex items-center gap-txt-gap-x md:gap-txt-gap-x-md'><Icon icon={AiFillEye} /> {formatWithThousandsSeparator(viewCount)}</span>
          <span>·</span>
          <span>{authorName}</span>
        </div>
      </div>
    </Link>
  )
}

export default ArticleRecommendItem
